<template>
  <div>
    <!-- 头部 -->
    <MyHeader />
    <div class="class">
      <div class="w">
        <!-- 导航 -->
        <p class="Navigation">
          <a href="#">首页</a> > <span>服饰鞋包</span>
        </p>
        <!-- 盒子 -->
        <div class="item">
          <!-- 分类 -->
          <div class="fenlei">
            <span class="text">分类：</span>
            <div class="all">
              <a href="javascript:;" @click="handleAdd(_rawValue.id)" class="alltext" v-for="_rawValue in tableData"
                :key="_rawValue.id">{{
                  _rawValue.name1
                }}</a>
            </div>
          </div>
          <!-- 排序 -->
          <div class="paixu">
            <span class="text">排序：</span>
            <div class="all">
              <a href="#" class="alltext active">默认</a>
              <a href="#" class="alltext">
                <span>价格</span>
                <i></i>
              </a>
              <span><input placeholder="￥" type="text"> - <input placeholder="￥" type="text"></span>
              <span class="queren"><button>确定</button><a href="#">清空</a></span>
            </div>
          </div>
          <Item v-if="fn" />
          <List :mylist="a"></List>
          <!-- 组件 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Item from '@/components/clothes/item.vue'
import MyHeader from '@/components/MyHeader.vue'
import List from '@/components/clothes/List.vue'
import axios from 'axios';
import { onMounted, provide, ref } from 'vue';

const tableData = ref([])
function loadList() {
  axios.get('http://localhost:3001/whole').then(res => {
    tableData.value = res.data
    a.value = res.data
  })
}
onMounted(() => {
  loadList()
})

const fn = ref(true)



let list = ref([])
// let list = ref([tableData])
let a = ref([])
// const a = ref(tableData)
function handleAdd(id) {
  list.value = id
  a.value = tableData.value.filter(item => item.id === id)
  // if (tableData.value.filter(item => item.id === id)._rawValue[0]) {
  //   a.value = tableData.value.filter(item => item.id === id)
  // } else {
  //   a.value = []
  // } 
  console.log(a.value);
  fn.value = false
  if (list.value === 1) {
    fn.value = true
  }

}



// const handleAdd = (id) => {
//   list.value = a.value
//   console.log(list);


// }



// provide('list', list.value)
// const handleAdd = () => {
//   list.value.push(a.value)
//   a.value = []

// }

</script>

<style lang="less" scoped>
.class {
  background-color: rgba(241, 241, 241, 0.814);
  padding-top: 15px;
  padding-bottom: 30px;

  .Navigation {

    padding-bottom: 15px;
    font-size: 10px;

    span {
      color: #ccc;
    }

  }

  .item {
    // height: 500px;
    padding: 25px 40px;
    background-color: #fff;

    .fenlei {
      display: flex;
      border-bottom: 1px dashed #dedede;
      margin: 10px 0;

      .text {
        display: block;
        height: 26px;
        font-size: 14px;
        color: #999;
        margin-right: 20px;
      }

      .active {
        color: #c1a280;
      }

      .all {
        display: flex;
        flex-wrap: wrap;
        width: 930px;

        .alltext {
          float: left;
          margin-right: 25px;
          margin-bottom: 16px;
          font-size: 14px;

        }

        a:hover {
          color: @xtxColor;
        }
      }
    }

    .paixu {
      height: 30px;
      display: flex;
      border-bottom: 1px dashed #dedede;
      margin: 10px 0;
      line-height: 20px;

      .text {
        display: block;
        height: 26px;
        font-size: 14px;
        color: #999;
        margin-right: 20px;
      }

      .active {
        color: #c1a280;
      }

      .all {
        display: flex;
        flex-wrap: wrap;
        width: 930px;

        .alltext {
          float: left;
          margin-right: 25px;
          margin-bottom: 16px;
          font-size: 14px;
        }

        input {
          width: 63px;
          height: 20px;
        }

        .queren {
          button {
            color: #ccc;
            background-color: #f5f5f5;
            margin-right: 10px;
            margin-left: 10px;
            text-align: center;
            width: 60px;
            height: 26px;
            line-height: 24px;
            border: 1px solid #ccc;
            border-radius: 2px;
            cursor: pointer;
          }

          a {
            color: #999;
            background-color: #fff;
          }

          a:hover {
            color: #b4a078;
          }
        }
      }
    }
  }
}
</style>